<script lang="ts" setup>
import { EXAMPLE_IMAGE_PATH } from '@/configs/static-files.config';
import { EXAMPLE_ROUTES } from '@/router';

const credit = {
  creator: {
    link: 'https://unsplash.com/@nuvaproductions?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText',
    info: 'Javier Miranda',
  },
  website: {
    link: 'https://unsplash.com/s/photos/earth?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText',
    info: 'Unsplash',
  },
};
const { VITE_APP_NAME, VITE_APP_DESC } = import.meta.env;

const router = useRouter();

const showDoc = ref(false);
</script>
<template>
  <div
    :style="{
      backgroundImage: `url(${EXAMPLE_IMAGE_PATH}index/javier-miranda-unsplash.jpg)`,
    }"
    class="h-full w-full bg-sky-900 bg-cover"
  >
    <!-- 介绍信息 -->
    <div class="pt-40 pl-20">
      <div class="select-none text-5xl font-extrabold text-white">{{ VITE_APP_NAME }}</div>
      <div class="mt-4 select-none text-xl text-white/80">{{ VITE_APP_DESC }}</div>
      <div class="mt-4">
        <a :href="router.resolve(EXAMPLE_ROUTES[0].path).fullPath" class="btn">进入示例</a>
        <button class="btn ml-2 bg-emerald-600 hover:bg-emerald-700" @click="showDoc = !showDoc">
          {{ showDoc ? '还没写好' : '查看文档' }}
        </button>
      </div>
    </div>
    <!-- 背景版权 -->
    <span class="absolute bottom-2 right-2 rounded border-gray-300 text-sm text-white/50">
      Photo by
      <a :href="credit.creator.link" class="underline hover:text-white/75">{{ credit.creator.info }}</a>
      on
      <a :href="credit.website.link" class="underline hover:text-white/75">{{ credit.website.info }}</a>
    </span>
  </div>
</template>

<style>
@import '@/assets/style/tailwind.css';
@import '@/assets/style/preset.pcss';
</style>
